<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Multi-Element Transition</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
    <script type="text/javascript" src="../../lib/d3.js"></script>
</head>

<body>
<!--<div style="width:50px;height:50px;left: 50px; background-color: #5e7d00"></div>-->
<script type="text/javascript">
    var id = 0,
        data = [],
        duration = 200,
        chartHeight = 100,
        chartWidth = 680;

    for (var i = 0; i < 20; i++) push(data);

    function render(data) {
        var selection = d3.select("body")
            .selectAll("div.v-bar")
            .data(data, function (d) {
                return d.id;
            }); // <-A

        // enter
        selection.enter()
            .append("div")
            .attr("class", "v-bar")
            .style("position", "fixed")
            .style("top", chartHeight + "px")
            .style("background-color",function (d,i) {
                return d.color;
            })
            .style("left", function (d, i) {   //left变化的，top是不变的
                return barLeft(i + 1) + "px"; // <-B
            })
            .style("height", "0px") // <-C
            .append("span");

        // update
        selection
            .transition().duration(duration) // <-D
            .style("top", function (d) {
                return chartHeight - barHeight(d) + "px";   //top是距离顶的距离
            })
            .style("left", function (d, i) {    //更新left值和height值
                return barLeft(i) + "px";
            })
            .style("height", function (d) {
                return barHeight(d) + "px";
            })
            .style("background-color",randomColor())
            .select("span")
            .text(function (d) {
                return d.value;
            });   //d.value，d是字典
        // exit
        selection.exit()
            .transition().duration(duration) // <-E
            .style("left", function (d, i) {
                return barLeft(-1) + "px"; //<-F    制造最左边一格右移出去的效果
            })
            .remove(); // <-G
    }

    function push(data) {
        data.push({
            id: ++id,
            value: Math.round(Math.random() * chartHeight),
            color:randomColor()
        });
    }

    function barLeft(i) {
        return i * (30 + 2);　　　　//根据ｉ来定位left值
    }

    function barHeight(d) {
        return d.value;
    }

    function randomColor() {
        return '#' +
            (function (color) {
                return (color += '0123456789abcdef'[Math.floor(Math.random() * 16)])
                && (color.length == 6) ? color : arguments.callee(color);
            })('');   //''是参数，表示空字符串，递归的初始状态
    }


    setInterval(function () {
        data.shift();    //删除第一个元素并返回（这里没有返回）
        push(data);   //添加新元素
        render(data);
    }, 200);

    render(data);

    d3.select("body")　　　//坐标轴
        .append("div")
        .attr("class", "baseline")
        .style("position", "fixed")
        .style("top", chartHeight + "px")
        .style("left", "0px")
        .style("width", chartWidth + "px");
</script>

</body>

</html>